import { Meta } from '@storybook/addon-docs';

<Meta title="Design system/Navigation/Tabs" />

<h1 class="text-xl font-semibold mb-md">Tabs</h1>

<div class="border-b border-gray-200 mb-lg">
  <nav class="flex space-x-4" aria-label="Tabs">
    <a
      href="#!"
      class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
    >
      Browse Rows
    </a>
    <a
      href="#!"
      class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
    >
      Insert Row
    </a>
    <a
      href="#!"
      class="border-yellow-500 text-yellow-500 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
      aria-current="page"
    >
      Modify
    </a>
    <a
      href="#!"
      class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
    >
      Relationships
    </a>
    <a
      href="#!"
      class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
    >
      Permissions
    </a>
  </nav>
</div>

<h2 class="text-lg font-semibold mb-xs">What are tabs?</h2>
<p class="mb-md text-muted mb-0">
  Tabs are in-page navigation to move within modules of our application.
</p>
<p class="mb-md text-muted">
  Tabs are considered part of the header unit and would have the larger margin
  between it and the rest of the body content.
</p>
